import { Callout, Sandpack } from '@/components'

# useSuspenseInfiniteQuery

<Callout type='warning'>

**@suspensive/react-query에서 Deprecated**

이 훅은 이제 TanStack Query v4.40.0+에서 공식적으로 지원됩니다. TanStack Query에서 백포팅했으므로, @suspensive/react-query의 백포팅된 버전을 deprecated 처리합니다. 공식 TanStack Query 인터페이스로 마이그레이션하세요:

```diff
- import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
+ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
```

자세한 내용은 [TanStack Query PR #9334](https://github.com/TanStack/query/pull/9334)을 참고하세요.

</Callout>

이 hook의 return 타입에는 isLoading, isError이 없습니다. `<Suspense/>` and `<ErrorBoundary/>`가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 [useInfiniteQuery](https://tanstack.com/query/v4/docs/react/reference/useInfiniteQuery)처럼 사용하면 됩니다.

```tsx /useSuspenseInfiniteQuery/
import { useSuspenseInfiniteQuery } from '@suspensive/react-query'

const Example = () => {
  const query = useSuspenseInfiniteQuery({
    queryKey,
    queryFn,
  }) // suspense 옵션은 true가 기본입니다.

  // isSuccess으로 type narrowing이 필요하지 않습니다.
  query.data // InfiniteData<TData>
}
```

<Sandpack>

```tsx Posts.tsx active
import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
import { useEffect, Fragment } from 'react'
import { getPosts } from './api'

export const Posts = () => {
  const { data, isFetchingNextPage, isFetched, hasNextPage, fetchNextPage } =
    useSuspenseInfiniteQuery({
      queryKey: ['posts'],
      queryFn: ({ pageParam = 1 }) => getPosts(pageParam),
      getNextPageParam: (lastPage, allPages) =>
        lastPage.skip + lastPage.limit < lastPage.total
          ? allPages.length + 1
          : undefined,
    })

  useEffect(() => {
    if (!isFetchingNextPage && isFetched) {
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth',
      })
    }
  }, [isFetchingNextPage, isFetched])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        marginBottom: '100px',
      }}
    >
      <ol>
        {data.pages.map((page, i) => (
          <Fragment key={i}>
            {page.data.map((post) => (
              <li key={post.id} style={{ marginBottom: '10px' }}>
                {post.title}
              </li>
            ))}
          </Fragment>
        ))}
      </ol>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </div>
  )
}
```

```tsx Example.tsx
import { Suspense } from '@suspensive/react'
import { Posts } from './Posts'

export const Example = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Posts />
    </Suspense>
  )
}
```

```tsx api.ts
type Post = {
  userId: number
  id: number
  title: string
  body: string
}

export const getPosts = async (
  page: number
): Promise<{
  data: Post[]
  page: number
  total: number
  limit: number
  skip: number
}> => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`
  )

  if (!response.ok) {
    throw new Error('An error occurred')
  }

  const data = await response.json()

  return {
    data,
    page,
    total: 100,
    limit: 10,
    skip: (page - 1) * 10,
  }
}
```

</Sandpack>

### 동기

@tanstack/react-query에서 suspense 옵션을 사용하면, [useInfiniteQuery](https://tanstack.com/query/v4/docs/react/reference/useInfiniteQuery)를 `<Suspense/>`, `<ErrorBoundary/>`와 함께 사용할 수 있습니다.

```tsx /useInfiniteQuery/
import { useInfiniteQuery } from '@tanstack/react-query'

const Example = () => {
  const query = useInfiniteQuery({
    queryKey,
    queryFn,
    suspense: true,
  })

  query.data // InfiniteData<TData> | undefined

  if (query.isSuccess) {
    query.data // InfiniteData<TData>
  }
}
```

하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 `<Suspense/>` 덕분에 항상 성공한 경우일 것입니다.

이것이 @suspensive/react-query가 **useSuspenseInfiniteQuery**를 제공하는 이유입니다.

<Callout>

성공한 케이스에 집중하세요.

이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다.

</Callout>

### 버전 기록

| Version  | Changes                                                                                                                              |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `v3.0.0` | `networkMode`는 `'always'`로 고정되었습니다. 자세한 내용은 [v3로 마이그레이션하기 문서](./migration/migrate-to-v3.mdx)를 참고하세요. |
